<template>
  <div class="settings-view">
    <el-tabs>
      <el-tab-pane label="快捷键设置">
        <ShortcutSettings />
      </el-tab-pane>
      <el-tab-pane label="用户偏好">
        <UserPreferences @preferences-change="handlePreferencesChange" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import ShortcutSettings from '@/components/settings/ShortcutSettings.vue'
import UserPreferences from '@/components/settings/UserPreferences.vue'
import type { Preferences } from '@/types/settings'

const handlePreferencesChange = (preferences: Preferences) => {
  // 应用新的偏好设置
  document.documentElement.setAttribute('data-theme', preferences.colorScheme)
  // 其他设置更新逻辑...
}

onMounted(() => {
  // 初始化主题
  const savedPreferences = localStorage.getItem('medical-viewer-preferences')
  if (savedPreferences) {
    const { colorScheme } = JSON.parse(savedPreferences)
    document.documentElement.setAttribute('data-theme', colorScheme)
  }
})
</script>

<style scoped>
.settings-view {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}
</style> 